<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
            .wrap {   
                width: 500px;   
                height: 300px;   
                margin: 30px auto;   
                position: relative;   
                background: #fff url(img/tourism2.png) no-repeat center center;   
                background-size: 100% 100%;   
            }   
            /*设置动画*/  
            @keyframes spin{   
                0%{   
                    transform:rotateY(0deg)   
                }   
                100%{   
                    transform:rotateY(360deg)   
                }   
            }   
            .spin {   
                width: 142px;   
                height: 200px;   
                position: absolute;   
                top: 50%;   
                left: 50%;   
                margin-left: -72px;   
                margin-top: -101px;   
                border: 1px dashed orange;   
                cursor: pointer;   
                transform-style: preserve-3d;   
            }   
            /*调用动画*/  
            .spin:hover{   
                animation:spin 5s linear infinite;   
            }   
            .rotate {   
                background: url() no-repeat center;   
                background-size: 100% 100%;   
                border: 5px solid hsla(50,50%,50%,.9);   
                transform: perspective(200px) rotateY(45deg);   
            }   
            .rotate img{   
                border: 1px solid green;   
                transform: rotateX(15deg) translateZ(10px);   
                transform-origin: 0 0 40px;   
            }   
            /*改变transform-style的默认值*/  
            .three-d {   
                transform-style: preserve-3d;   
            }
        </style>
    </head>
    <body>
        <div class="wrap">  
            <div class="spin">  
                <div class="rotate">  
                    <img src="img/puke/2.jpg" alt="" width="142" height="200" />  
                </div>  
            </div>  
        </div>  
        <div class="wrap">  
            <div class="spin">  
                <div class="rotate three-d">  
                    <img src="img/puke/3.jpg" alt="" width="142" height="200" />  
                </div>  
            </div>  
        </div>  
    </body>
</html>